<template>
  <div class="app-container">
    <manual-filter :tag="2" @on-filter="submitFilterForm"/>
    <div style="padding: 20px 0">
      <el-button-group>
        <el-button size="mini" type="primary" icon="el-icon-download" @click="exportHandle">导出
        </el-button>
      </el-button-group>
    </div>
    <el-table height="540" :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="提现时间" width="90" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="提现单号" width="100" prop="orderId" align="center">
        <template slot-scope="{row}">
          <div :class="{'active': row.splitStatus == 1}">{{row.orderId}}</div>
        </template>
      </el-table-column>
      <el-table-column label="拆单关联号" prop="batchNumber" align="center">
      </el-table-column>
      <el-table-column label="账户类型" prop="userType" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="提现类型" prop="aisleType" align="center">
        <template slot-scope="{row}" >
          {{row.aisleType | toConverter('AISLE_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="层级" prop="userLevel" align="center">
      </el-table-column>
      <el-table-column label="账户名" prop="username" align="center">
      </el-table-column>
        <el-table-column label="姓名" prop="reallyName" align="center">
        </el-table-column>
      <el-table-column sortable label="提现金额 " width="100" prop="amount" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <!--sortable-->
      <el-table-column sortable label="手续费 " width="90" prop="fee" align="center">
        <template slot-scope="{row}">
          {{row.fee | currency}}
        </template>
      </el-table-column>
      <el-table-column :sortable="true" :sort-by="formatter" label="出款确认" width="100" prop="moneyCheck" align="center">
          <template slot-scope="{row}">
          {{row.paragraph | currency}}
        </template>
      </el-table-column>
      <el-table-column label="标签" width="150" prop="tag" fixed="right" align="center"></el-table-column>

      <el-table-column label="玩家银行" align="center">
        <el-table-column label="名称" prop="bankName" width="90" align="center">
        </el-table-column>
        <el-table-column label="卡号" prop="cardNo" width="150" align="center">
          <template slot-scope="{row}">
            <span class="clipboard-btn" :data-clipboard-text="row.cardNo" >{{row.cardNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="开户行地址" prop="address" width="120" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="玩家姓名" width="90" prop="name" align="center">
        <template slot-scope="{row}">
          <span class="clipboard-btn" :data-clipboard-text="row.name" >{{row.name}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column label="出款商户" width="180" prop="merchant" align="center">-->
      <!--</el-table-column>-->
      <el-table-column label="操作端" prop="clientType" align="center">
        <template slot-scope="{row}">
          {{row.clientType | toConverter('PAYMENT_PLATFORM')}}
        </template>
      </el-table-column>
      <el-table-column label="出款人" width="90" prop="approver" align="center">
      </el-table-column>
      <el-table-column label="出款时间" width="90" prop="lastUpdate" align="center">
        <template slot-scope="{row}">
          {{row.lastUpdate| toTime}}
        </template>
      </el-table-column>
      <el-table-column label="处理人" width="120" prop="seperator" align="center">
      </el-table-column>
      <el-table-column label="分单人" width="120" prop="seperateCreator" align="center">
      </el-table-column>
      <el-table-column label="分单时间" width="90" prop="seperateDate" align="center">
        <template slot-scope="{row}">
          {{row.seperateDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="风险处理人" width="90" prop="riskApprover" align="center">
      </el-table-column>
      <el-table-column label="风险处理时间" width="90" prop="riskApvTime" align="center">
        <template slot-scope="{row}">
          {{row.riskApvTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120" prop="status" align="center">
        <template slot-scope="{row}">
          {{row.status | toConverter('MANUAL_WITHDRAW_STATUS_TWO')}}
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150" prop="remark" align="center">
      </el-table-column>
      <!--<el-table-column label="操作" width="150" fixed="right" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--&lt;!&ndash;<span v-if="[0, 2 ,6,7].indexOf(row.status)>-1">&ndash;&gt;-->
            <!--&lt;!&ndash;<el-button-group v-if="[0, 6,7].indexOf(row.status)>-1">&ndash;&gt;-->
              <!--&lt;!&ndash;<el-button v-if="roleCheck('manual-agree')" type="warning"&ndash;&gt;-->
                         <!--&lt;!&ndash;size="mini"&ndash;&gt;-->
                         <!--&lt;!&ndash;@click="setStep('agree');openDialog({dialogName: 'normal-withdraw-dialog', props: row })" >通过&ndash;&gt;-->
              <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
              <!--&lt;!&ndash;<el-button v-if="roleCheck('manual-refuse')" type="danger"&ndash;&gt;-->
                         <!--&lt;!&ndash;size="mini"&ndash;&gt;-->
                         <!--&lt;!&ndash;@click="setStep('refuse');openDialog({dialogName: 'normal-withdraw-dialog', props: row })" >拒绝&ndash;&gt;-->
              <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
            <!--&lt;!&ndash;</el-button-group>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-button  v-if="[2].indexOf(row.status)>-1 && roleCheck('manual-return')" type="text" @click="setStep('back');openDialog({dialogName: 'normal-withdraw-dialog', props: row })"&ndash;&gt;-->
                      <!--&lt;!&ndash;&gt;退回&ndash;&gt;-->
            <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
          <!--&lt;!&ndash;</span>&ndash;&gt;-->

          <!--&lt;!&ndash;<el-button  v-if="[2].indexOf(row.status)>-1 && roleCheck('manual-return')" type="text"&ndash;&gt;-->
                      <!--&lt;!&ndash;@click="setStep('back');openDialog({dialogName: 'normal-withdraw-dialog', props: row })"&ndash;&gt;-->
          <!--&lt;!&ndash;&gt;退回&ndash;&gt;-->
          <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
          <!--&lt;!&ndash;<span v-else>-</span>&ndash;&gt;-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <div style="font-size:12px;margin-top:30px;color:grey;">
      <span>注1：提现拆过单的提现单号，会以淡棕底色显示；在注单筛选位置输入注单号并勾选关联拆单搜索，即可筛选出晒单相关联的注单</span><br>
      <span>注2：若是一笔人工出款单拆单后进入了不同的页面（审核等等）则可以在相关联的位置进行注单关联搜索</span><br>
      <span>注3：拆单关联号说明，例子：1-2-1（1-代表单个会员拆单数，2-代表此单一共拆成几个提现单，1-代表拆单中的第几单），拆单关联号号码以天为周期</span>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>

    <normal-withdraw-dialog
      v-if="dialogName === 'normal-withdraw-dialog'"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :row-data="dialogProps"
      :step = "step"
      @submit="submitFinished"/>
  </div>
</template>


<script>
  import {getWithdrawList,exportAutoRecord} from "@/services/api/withdraw";
  import {grid, constsLabel, dialog,handleDownload} from '@/build';
  import ManualFilter from "@/views/finance/withdraw/manualFilter";
  import NormalWithdrawDialog from "@/views/finance/withdraw/normalWithdrawDialog";
  import CommentDialog from './commentDialog'

  export default {
    name: "withdraw-normal",
    components: {NormalWithdrawDialog, ManualFilter,CommentDialog},
    mixins: [grid, constsLabel, dialog,handleDownload],
    data() {
      return {
        activeClass:'active',
        tableData: {},
        rowData: {},
        commentDialogVisible:false,
        filters: {
          size:20,
          page:1,
          withdrawType:0,
          status:'1,2,3,4,5,-2',
          fromDate:moment().format('YYYY-MM-DD 00:00:00'),
          endDate:moment().format('YYYY-MM-DD 23:59:59'),
          startTime:moment().format('YYYY-MM-DD 00:00:00'),
          endTime:moment().format('YYYY-MM-DD 00:00:00'),
          userLevel: [],
        },
        dialogVisible:false,
        step:'agree'
      }
    },
    methods: {
      setStep(step){
        this.step = step
      },
      formatter(row, column) {
        return row.paragraph;
      },
      exportHandle() {
        let {time,fromDate,endDate,withdrawType,status,dateType,searchType,keywords,bankId,clientType,userType,cardNo,maxAmount,minAmount,startTime,endTime} = this.filters
        let ajaxData = {time,fromDate,endDate,withdrawType,status,dateType,searchType,keywords,bankId,clientType,userType,cardNo,maxAmount,minAmount,startTime,endTime}
        let filename = '人工出款记录明细报表.csv';
        let header = ['提现时间', '提现单号','拆单关联号', '账户类型','提现类型','层级','账户名','姓名','提现金额','手续费','出款确认','名称','卡号','开户行地址','玩家姓名','操作端','出款人','出款时间','处理人','分单人','分单时间','风控处理时间','状态','备注','标签']
        let filterField = ['createDate', 'orderId','batchNumber', 'userType','aisleType','userLevel','username','reallyName','amount','fee','paragraph','bankName','cardNo','address','name','clientType','approver','lastUpdate','seperator','seperateCreator','seperateDate','riskApvTime','status','remark','tag']
        exportAutoRecord(ajaxData).then(([result, data]) => {
      if (result) {
            let exportData = this.responseFormatter(data.list);
            this.export2Excel(header, filterField, exportData, filename)

          } else {
            this.$message({message: '导出失败,' + data.message, type: "warning"})
          }
        })
      },
       responseFormatter(data) {
        data.map(item => {
          item.createDate = _.toTime(item.createDate)
          item.userType =_.toConverter(item.userType,'ACCOUNT_TYPE')
          item.amount = _.currency(item.amount)
          item.fee = (parseInt((item.fee)*100)/100).toFixed(2)
          item.paragraph = _.currency(item.amount - item.fee)
          item.clientType =_.toConverter(item.clientType,'PAYMENT_PLATFORM')
          item.seperateDate = _.toTime(item.seperateDate)
          item.riskApvTime = _.toTime(item.riskApvTime)
          item.lastUpdate = _.toTime(item.lastUpdate)
          item.status = _.toConverter(item.status, 'MANUAL_WITHDRAW_STATUS')
          item.aisleType = _.toConverter(item.aisleType, 'AISLE_TYPE')
        })

        return data
      }
    },
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG,{content:_.getContent(this.$route,'正常提现-人工出款',true)});
      this.bindGet(getWithdrawList, 'tableData', {
        action: 'getGrid',
        beforeSend : (data) => {
          if(data.splitType){
             data.splitType=1
          }else{
             data.splitType=undefined
          }
          if(data.userLevel.length > 0){
            data.userLevel = data.userLevel.join(',')
          }
          return data
        },
        sendingData: 'filters',
        format: data => {
          data.list.forEach((v,k)=>{
            this.$set(v,'paragraph',v.amount - v.fee)
          })
          return data;
        }
      });
      this.getAll()
    }
  }
</script>

<style scoped>
  .undeline-link {
    display: block;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
  }
  .active{
    color:#F4A460;;
  }
</style>
